<template>
  <div class="mod-sys-area">
    <div class="search-bar" >
      <div class="default-btn primary-btn area-add-btn" @click="addOrUpdateHandle()">{{$t('sysManagement.add')}}</div>
    </div>
    <div style="display: flex">
      <div style="width: 45%;margin: 0 20px;text-align: center">
        <h3 style="margin-bottom: 20px">原文举报标题</h3>
        <el-table
          :data="articleDataList"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            label="顺序"
            prop="orderNum"
            align="center"
            width="250"
          />
          <el-table-column
            label="标题"
            prop="title"
            align="center"
          />
          <el-table-column
            :label="$t('crud.menu')"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row, $index }">
              <el-button type="text" @click="addOrUpdateHandle(row.id)">编辑</el-button>
              <el-button type="text" @click="deleteHandle(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="width: 50%;text-align: center">
        <h3 style="margin-bottom: 20px">评论/聊天举报标题</h3>
        <el-table
          :data="commentDataList"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            label="顺序"
            prop="orderNum"
            align="center"
            width="250"
          />
          <el-table-column
            label="标题"
            prop="title"
            align="center"
          />
          <el-table-column
            :label="$t('crud.menu')"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row, $index }">
              <el-button type="text" @click="addOrUpdateHandle(row.id)">编辑</el-button>
              <el-button type="text" @click="deleteHandle(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <add-or-update v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from './add-or-update'

  export default {
    data () {
      return {
        articleDataList: [], // 文章的
        commentDataList: [], // 评论的
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    created () {
      this.getDataList()
    },
    mounted () {
    },
    methods: {
      getDataList () {
        this.$http({
          url: this.$http.adornUrl('/admin/report/title/listMap'),
          method: 'get'
        }).then(({ data }) => {
          this.articleDataList = data['0'] ? data['0'] : []
          this.commentDataList = data['1'] ? data['1'] : []
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },

      // 删除
      deleteHandle (id) {
        this.$confirm(this.$i18n.t('seckill.isDeleOper'), this.$i18n.t('text.tips'), {
          confirmButtonText: this.$i18n.t('coupon.confirm'),
          cancelButtonText: this.$i18n.t('coupon.cancel'),
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/admin/report/title/' + id),
            method: 'delete',
            data: this.$http.adornData({})
          }).then(({ data }) => {
            this.$message({
              message: this.$i18n.t('publics.operation'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          })
        }).catch(() => { })
      }
    }

  }
</script>

<style lang="scss" scoped>
  .mod-sys-area {
    .search-bar {
      background: transparent;
      margin-bottom: 15px;
      padding: 0;
      padding-bottom: 40px;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
    .area-search-input {
      width: 30%;
    }
    .area-add-btn {
      float: right;
    }
  }
</style>
